import React, { Component } from 'react';
import style from './modify-main.module.css';
import { Layout, Input,Upload, Icon, Modal,Select,Cascader,DatePicker,Radio } from 'antd';
import Ueditor from '../ueditor/ueditor';
const { Header, Footer, Sider, Content } = Layout;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

function img_getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}


class Modify extends Component {
  constructor(props) {
    super(props);
  }

  state={
    header_idx:0,
    previewVisible: false,
    previewImage: '',
    fileList: [],
    imageUrl:'',
    status:1, 
  }

  headerClick(idx,mod){
    this.setState({
      header_idx:idx
    })
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => {
    console.log(fileList)
    this.setState({ fileList })
  };

  imghandleChange = info => {
    console.log(info)
    // Get this url from response in real world.
    img_getBase64(info.file.originFileObj, imageUrl =>
      this.setState({
        imageUrl,
      }),
    );
  };

  handleDownload=(e)=>{
    console.log(e)
  }

  statusChange = e => {
    this.setState({
      status: e.target.value,
    });
  };

  render() { 
    const { previewVisible, previewImage,fileList,imageUrl } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    const lanmu_options = [
      {
        value: '父栏目一',
        label: '父栏目一',
        children: [
          {
            value: '栏目一',
            label: '栏目一',
            children: [
              {
                value: '子栏目一',
                label: '子栏目一',
              },
            ],
          },
        ],
      },
      {
        value: '父栏目二',
        label: '父栏目二',
        children: [
          {
            value: '栏目二',
            label: '栏目二',
            children: [
              {
                value: '子栏目二',
                label: '子栏目二',
              },
            ],
          },
        ],
      },
    ];
    
    return (
      <div className={style.main}>
        <ul className={style.main_header}>
          <li className={this.state.header_idx==0?style.main_header_act:''} onClick={this.headerClick.bind(this,0,'base')}>基本信息</li>
          <li className={this.state.header_idx==1?style.main_header_act:''} onClick={this.headerClick.bind(this,1,'seo')}>SEO设置</li>
        </ul>
        <div style={this.state.header_idx == 0?{display:'block'}:{display:'none'}} className={style.content}>
          <Layout>
            <Content className={style.content_center}>
              <div className={style.contentlist}>
                <span>标题：</span>
                <Input placeholder='输入您的标题'/>
              </div>
              <div className={style.contentlist02}>
                <span>修改内容：</span>
                <Ueditor className={style.myeditor} id={'myeditor'} />
              </div>
              <div className={style.contentlist03}>
                <span>标签：</span>
                <Input className={style.contentlist03_input} placeholder='输入您的标签'/>
              </div>
              <div className={style.contentlist02}>
                <span>细节图：</span>
                <div className="clearfix">
                  <Upload
                    action="http://101.132.227.90:10086/upload/upload.php?act=goupload"
                    // action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    method='GET'
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}   //	点击文件链接或预览图标时的回调
                    onDownload={this.handleDownload}
                    onChange={this.handleChange}     // 上传文件改变时的状态
                  >
                    {fileList.length >= 8 ? null : uploadButton}
                  </Upload>
                  <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                  </Modal>
                </div>
              </div>
            </Content>
            <Sider width='450' className={style.sider}>
              <div className={style.gosubmit}>发布</div>
              <div className={style.contentlist03}>
                <span>选择栏目：</span>
                <Cascader options={lanmu_options} placeholder="选择栏目" />
              </div>
              <div className={style.contentlist02}>
                <span>列表图：</span>
                <div className={style.list_img}>
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  onChange={this.imghandleChange}
                >
                  {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload>
                </div>
              </div>
              <div className={style.contentlist03}>
                <span>发布时间：</span>
                <DatePicker />
              </div>
              <div className={style.contentlist03}>
                <span>排序：</span>
                <Input placeholder='请输入排序' />
              </div>
              <div className={style.contentlist03}>
                <span>状态：</span>
                <Radio.Group onChange={this.statusChange} value={this.state.status}>
                  <Radio value={1}>显示</Radio>
                  <Radio value={2}>隐藏</Radio>
                </Radio.Group>
              </div>
            </Sider>
          </Layout>
        </div>
        <div style={this.state.header_idx == 1?{display:'block'}:{display:'none'}} className={style.seo}>
          <div className={style.contentlist04}>
            <span>自定义页面title：</span>
            <Input placeholder='输入页面title'/>
          </div>
          <div className={style.contentlist04}>
            <span>关键词：</span>
            <Input placeholder='输入关键词'/>
          </div>
          <div className={style.contentlist04}>
            <span>描述文字：</span>
            <TextArea placeholder='输入描述文字' />
          </div>
        </div>
      </div>
    );
  }
}
 
export default Modify;